<template>
  <div>
  <div class="barticle6">
    <img src="../../assets/img/bp1.png"/>
    <img src="../../assets/img/bp2.png"/>
    <img src="../../assets/img/bp3.png"/>
    <img src="../../assets/img/bp1.png"/>
    <img src="../../assets/img/bp2.png"/>
    <img src="../../assets/img/bp3.png"/>
  </div>
  <div class="barticle7"  v-for="(n,index) in bcartsarticle" @click="searchnumber(index)">
    <div class="barticle7_1"><img :src="n.pic"/></div>
    <div class="barticle7_2">
      <p>{{n.belong}}</p>
      <h3>{{n.belong1}}<em>{{n.belong2}}</em></h3>
    </div>
  </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import bshopapis from "../../apis/bshopapis"
    export default {
      data(){
        return {
          bcartsarticle:[]
        }
      },
      created:function(){
        this.initData();
      },
      methods:{
        initData:function () {
          bshopapis.getshoparticle((data)=>{
            this.bcartsarticle=data;
          })
        },
        searchnumber:function (index) {
          this.$router.push(`/weiyi?id=${index}`)
        }
      }
    }
</script>

<style scoped lang="scss">
  .barticle6{
    height:1.4rem;
    background: pink;
    overflow-x: auto;
    display: flex;
    background: white;
    border-bottom: 1px solid #dddddd;
  }
  .barticle6::-webkit-scrollbar{
    display: none;
  }
  .barticle6 img{
    height:1rem;
    padding-top:0.2rem;
    padding-left:0.2rem;
  }
  .barticle7{
    width:100%;
    height:1.6rem;
    padding:0.2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
  }
  .barticle7_1 img{
    height:1.15rem;
  }
  .barticle7_2 p{
    font-size: 0.16rem;
    color:#333;
    margin-left:0.1rem;
    margin-top:0.2rem;
  }
  .barticle7_2 h3{
    font-weight: normal;
    color: #e8065b;
    margin-left:0.1rem;
    font-size: 0.08rem;
  }
  .barticle7_2 h3 em{
    font-style: normal;
    color: #999;
  }
</style>
